<script lang="ts" setup>
  import { reactive, watch } from 'vue';
  import Divider from '@sscd/divider';
  import Checkbox from '@sscd/checkbox';
  const state = reactive({
    indeterminate: true,
    checkAll: false,
    checkedList: ['Apple', 'Orange'],
  });
  const plainOptions = ['Apple', 'Pear', 'Orange'];
  const onCheckAllChange = (e: any) => {
    Object.assign(state, {
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
    });
  };
  watch(
    () => state.checkedList,
    (val) => {
      state.indeterminate = !!val.length && val.length < plainOptions.length;
      state.checkAll = val.length === plainOptions.length;
    }
  );
</script>

<template>
  <div class="demo">
    <div class="demo-title">全选</div>
    <div class="demo-content">
      <Checkbox
        v-model:checked="state.checkAll"
        :indeterminate="state.indeterminate"
        @change="onCheckAllChange"
      >
        Check all
      </Checkbox>
      <Divider />
      <Checkbox.Group v-model:value="state.checkedList" :options="plainOptions" />
    </div>
  </div>
</template>
